<template>
  <div>
    <el-form
      :model="form"
      :rules="rules"
      label-width="150px"
      ref="form"
      class="kylin-form"
    >
      <el-form-item :label="$t('configure.task_object')" prop="target_type">
        <el-select v-model="form.target_type" class="size">
          <el-option
            v-for="item in targets"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="$t('system.batch')"
        prop="batch"
        v-if="form.target_type === 'batch'"
      >
        <el-select v-model="form.batch" class="size">
          <el-option
            v-for="item in batches"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        :label="$t('system.host')"
        prop="host"
        v-if="form.target_type === 'host'"
      >
        <virtual-list
          :value="form.host"
          :multiple="true"
          size="small"
          class="size"
          :obj="true"
          @selectValue="handleHostSelect"
          :list="hosts"
        ></virtual-list>
      </el-form-item>
      <el-form-item
        :label="$t('file')"
        prop="file"
        v-if="form.target_type === 'file'"
      >
        <el-upload
          class="ky-template-upload"
          ref="upload"
          :action="action"
          :file-list="fileList"
          :auto-upload="false"
          accept=".xls"
          :on-remove="handleFileChange"
          :on-change="handleFileChange"
        >
          <el-button slot="trigger" size="small" class="kylin-button">{{
            $t("configure.click_select_file")
          }}</el-button>
          <el-button size="small" class="kylin-button" @click="handleDownload">
            {{ $t("host_xls_download") }}
          </el-button>
          <div slot="tip" class="el-upload__tip">
            {{ $t("only_upload_excel") }}
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">{{ $t("cancel") }}</el-button>
      <el-button
        class="kylin-button"
        @click="handleConfirm"
        v-loading="loading"
        >{{ $t("confirm") }}</el-button
      >
    </div>
  </div>
</template>

<script>
import virtualList from "@/components/virtualList";
import { getBatchList } from "@/api/batch";
import { getIssueConfigureHost } from "@/api/issue";
import { downloadTemplate } from "@/api/template";
import { issueByHost, issueByBatch, issueByFile } from "@/api/configure_group";
import { download } from "@/utils";
export default {
  components: {
    virtualList,
  },
  props: {
    scriptFrom: {
      default: null,
    },
    row_id: {
      default: null,
    },
    standarName: {
      type: String,
    },
  },
  data() {
    let checkFile = (rule, value, callback) => {
      if (this.fileList.length < 1) {
        callback(new Error(this.$t("file_require")));
      } else {
        callback();
      }
    };
    return {
      action: "#",
      loading: false,
      fileList: [],
      targets: [
        { id: "batch", name: this.$t("configure.select_batch") },
        { id: "host", name: this.$t("configure.select_host") },
        { id: "file", name: this.$t("configure.import_host") },
      ],
      hosts: [],
      batches: [],
      form: {
        target_type: "batch",
        batch: "",
        host: [],
      },
      rules: {
        batch: [
          {
            required: true,
            message: this.$t("system.batch_require"),
            trigger: "change",
          },
        ],
        host: [
          {
            required: true,
            message: this.$t("system.host_require"),
            trigger: "change",
          },
        ],
        file: [
          {
            validator: checkFile,
            trigger: "change",
            required: true,
          },
        ],
      },
    };
  },
  mounted() {
    let [os, version, arch] = this.standarName.split("-");
    let data = {
      version,
      arch,
      paged: false,
      os,
    };
    getBatchList(data).then((res) => {
      let results = res.data.data && res.data.data.results;
      let batches = [];
      results.forEach((item) => {
        batches.push({
          id: item.id,
          name: item.name,
        });
      });
      this.batches = batches;
    });
  },
  methods: {
    handleDownload() {
      downloadTemplate("suse_migrate_template").then((res) => {
        download(res, "配置项组下发模板");
      });
    },
    handleClose() {
      this.$refs.form.resetFields();
      this.$emit("click");
    },
    handleHostSelect(value) {
      this.form.host = value;
    },
    handleCancel() {
      this.$refs.form.resetFields();
      this.$emit("click");
    },
    handleFileChange(file, fileList) {
      if (fileList.length > 1) {
        this.fileList = fileList.slice(-1);
      } else {
        this.fileList = fileList;
      }
    },
    handleConfirm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.target_type === "file") {
            let data = new FormData();
            data.append("file", this.fileList[0].raw);
            this.loading = true;
            issueByFile(data).then((res) => {
              if (res.data.code == "0") {
                this.loading = false;
                this.$emit("click", "system", {id: res.data.data});
              } else {
                this.loading = false;
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            });
          } else if (this.form.target_type === "host") {
            this.loading = true;
            issueByHost(this.form.host).then((res) => {
              if (res.data.code == "0") {
                this.loading = false;
                this.$emit("click", "system", {id: res.data.data});
              } else {
                this.loading = false;
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            });
          } else {
            this.loading = true;
            issueByBatch({ batchId: this.form.batch }).then((res) => {
              if (res.data.code == "0") {
                this.loading = false;
                this.$emit("click", "system", {id: res.data.data, batchId: this.form.batch});
              } else {
                this.loading = false;
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            });
          }
        }
      });
    },
  },
  watch: {
    "form.target_type": function (value) {
      this.$refs.form.clearValidate();
      if (value === "host") {
        let [osName, osVersion, osArch] = this.standarName.split("-");
        let data = {
          osVersion,
          osArch,
          paged: false,
          osName,
        };
        getIssueConfigureHost(data).then((res) => {
          let hosts = [];
          res.data.data.results.forEach((item) => {
            hosts.push({
              id: item.ip,
              name: item.ip,
            });
            this.hosts = hosts;
          });
        });
      }
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.size {
  width: 100%;
}
</style>